<template>
    <el-container>
        <el-header>
            <el-page-header @back="goBack" content="帖子详情 "></el-page-header>
        </el-header>

        <div class="post-list">
            <el-card v-for="post in posts" :key="post.id" class="post-card">
                <div class="post-title">{{ post.title }}</div>
                <div class="post-info">
                    <span class="post-date">{{ post.postTime }}</span>
                </div>
                <div class="post-summary">{{ post.content }}</div>
            </el-card>
        </div>
    </el-container>
</template>
  
<script>
export default {
    data() {
        return {
            posts: []
        };
    }, async created() {
        this.postId = this.$route.params.postId;
        this.userId = this.$route.params.userId;
        this.userName = this.$route.params.userName;
        this.backPage = this.$route.params.backPage;
        await this.$axios.get('https://localhost:44300/api/Post/IDSelect', {
            params: {
                id: this.postId
            }
        })
            .then(response => {
                this.posts = response.data.response;
            })
            .catch(error => {
                console.error(error);
            });
    },
    methods: {
        goBack() {
            this.$router.push({ name: this.backPage, params: { userId: this.userId, userName: this.userName } });
        },
    },
};
</script>
  
<style scoped>
.form-item {
    margin-bottom: 20px;
}

.post-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.post-card {
    width: 80%;
    margin-bottom: 16px;
    cursor: pointer;
}

.post-title {
    font-size: 24px;
    margin-bottom: 8px;
}

.post-info {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}

.post-category {
    margin-right: 8px;
}

.post-summary {
    font-size: 16px;
    line-height: 1.5;
}
</style>
  